<template>
  <div class="go-rent">
    <!-- 去出租 -->
    <!-- 导航 -->
    <van-nav-bar
    class="title"
      title="发布房源"
      left-arrow
      @click-left="$router.push('/home')"
    />
    <!-- 出租信息 -->
    <div class="rent-info">
      <div class="house-info">房源信息</div>
      <van-field
        readonly
        label="小区名称"
        is-link
        input-align="right"
        placeholder="请输入小区名称"
        @click="$router.push('/community')"
        v-model="communityName"
      >
      </van-field>
      <van-field v-model="rent" label="租金" placeholder="请输入租金/月">
        <template #price> ￥/月 </template>
      </van-field>
      <van-field v-model="area" label="建筑面积" placeholder="请输入建筑面积">
        <template #area> ㎡ </template>
      </van-field>
      <div class="huxin">
        <van-field
          readonly
          clickable
          label="户型"
          :value="value1"
          placeholder="请选择"
          input-align="right"
          is-link
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @cancel="showPicker1 = false"
            @confirm="onConfirm1"
          />
        </van-popup>
        <div class="louceng">
          <van-field
            readonly
            clickable
            label="所在楼层"
            :value="value2"
            placeholder="请选择"
            input-align="right"
            is-link
            @click="showPicker2 = true"
          />
          <van-popup v-model="showPicker2" round position="bottom">
            <van-picker
              show-toolbar
              :columns="columns2"
              @cancel="showPicker2 = false"
              @confirm="onConfirm2"
            />
          </van-popup>
        </div>
        <div class="chaoxiang">
          <van-field
            readonly
            clickable
            label="朝向"
            :value="value3"
            placeholder="请选择"
            input-align="right"
            is-link
            @click="showPicker3 = true"
          />
          <van-popup v-model="showPicker3" round position="bottom">
            <van-picker
              show-toolbar
              :columns="columns3"
              @cancel="showPicker3 = false"
              @confirm="onConfirm3"
            />
          </van-popup>
        </div>
      </div>
    </div>
    <!-- 房屋标题 -->
    <div class="house-title">
      <div class="text">房屋标题</div>
      <van-field
        v-model="housetitle"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入房屋标题(例如：整租 小区名 2室 5000元)"
      />
    </div>
    <!-- 房屋图片 -->
    <div class="house-pic">
      <div class="text">房屋图像</div>
      <!-- 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。 -->
      <van-uploader :after-read="afterRead" multiple v-model="fileList" />
    </div>
    <!-- 房屋配置 -->
    <div class="house-set">
      <div class="text">房屋配置</div>
      <!-- 点击每个图标动态变化 -->
      <van-grid :column-num="5" :border="false" clickable>
        <van-grid-item
          v-for="(item, index) in gridList"
          :key="index"
          :icon="item.icon"
          :text="item.name"
          @click="item.class = !item.class"
          :class="{ active: item.class === true }"
        />
      </van-grid>
    </div>
    <!-- 房屋描述 -->
    <div class="house-desc">
      <div class="text">房屋描述</div>
      <van-field
        v-model="housedesc"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入房屋描述信息"
        show-word-limit
      />
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <div class="left" @click="clickFn">取消</div>
      <div class="right" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import { uploadImg, getConditions, fabuhouses } from '@/api/rent'
export default {
  data () {
    return {
      gridList: [{ icon: 'desktop-o', name: '衣柜', class: false },
        { icon: 'notes-o', name: '洗衣机', class: false },
        { icon: 'hotel-o', name: '空调', class: false },
        { icon: 'fire-o', name: '天然气', class: false },
        { icon: 'orders-o', name: '冰箱', class: false },
        { icon: 'hot-o', name: '暖气', class: false },
        { icon: 'tv-o', name: '电视', class: false },
        { icon: 'bulb-o', name: '热水器', class: false },
        { icon: 'cluster-o', name: '宽带', class: false },
        { icon: 'coupon-o', name: '沙发', class: false }],
      rent: '',
      area: '',
      value1: '',
      value2: '',
      value3: '',
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      columns1: [],
      roomType: [],
      columns2: [],
      floor: [],
      columns3: [],
      oriented: [],
      housetitle: '',
      housedesc: '',
      fileList: [],
      img: [],
      community: this.$route.query.community,
      supportingList: []
    }
  },
  async created () {
    // 获取房屋条件
    const { body } = await getConditions()
    console.log(body)
    this.roomType = body.roomType
    this.columns1 = body.roomType.map((item) => item.label)
    this.floor = body.floor
    this.columns2 = body.floor.map((item) => item.label)
    this.oriented = body.oriented
    this.columns3 = body.oriented.map((item) => item.label)
  },
  computed: {
    communityName () {
      return this.$route.query.communityName
    }
  },
  methods: {
    async submit () {
      this.gridList.forEach((item) => {
        if (item.class === true) {
          this.supportingList.push(item.name)
        }
      })
      console.log(this.supportingList)
      await fabuhouses({
        title: this.housetitle,
        description: this.housedesc,
        price: this.rent,
        size: this.area,
        oriented: this.oriented.find((item) => item.label === this.value3)
          .value,
        roomType: this.roomType.find((item) => item.label === this.value1)
          .value,
        floor: this.floor.find((item) => item.label === this.value2).value,
        community: this.community,
        // community: 'AREA|93cbbe43-741d-de54',
        houseImg: this.img.join('|'),
        supporting: this.supportingList.join('|')
      })
      this.$toast.success('发布房源成功')
    },
    onConfirm1 (value1) {
      this.value1 = value1
      this.showPicker1 = false
    },
    onConfirm2 (value2) {
      this.value2 = value2
      this.showPicker2 = false
    },
    onConfirm3 (value3) {
      this.value3 = value3
      this.showPicker3 = false
    },
    async afterRead (file) {
      console.log(file)
      const res = await uploadImg(file.file)
      this.img.push(res.body[0])
      console.log(this.img)
      console.log(res.body)
      // uploadImg(file)
      // 此时可以自行将文件上传至服务器
    },
    clickFn () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '放弃发布房源?',
          confirmButtonColor: '#21b97a',
          confirmButtonText: '继续编辑',
          cancelButtonText: '放弃'
        })
        .then(() => {
          // on confirm
          console.log(this.selections)
        })
        .catch(() => {
          this.$router.push('/')
        })
    }
  }
}
</script>

<style lang="less" scoped>
// .color {
//   color: #21b97a !important;
// }
.active {
  color: #21b97a;
  /deep/ .van-grid-item__text {
    color: #21b97a;
  }
}
.go-rent {
  background-color: #f6f5f6;
  .rent-info {
    .house-info {
      color: #21b97a;
      padding-left: 16px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd5d5;
      background-color: white;
    }
  }

  .house-pic {
    background-color: white;
  }
  .house-desc {
    background-color: white;
    margin: 20px 0;
    height: 200px;
  }
  .footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    .left {
      height: 40px;
      line-height: 40px;
      flex: 1;
      text-align: center;
      background-color: white;
      color: #21b97a;
    }
    .right {
      height: 40px;
      line-height: 40px;
      flex: 1;
      text-align: center;
      background-color: #21b97a;
      color: white;
    }
  }
  .text {
    font-size: 14px;
    padding-left: 16px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd5d5;
    background-color: white;
  }
}
.title {
  background-color:#1cb680;
  padding-right: 20px;
  text-align: center;
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 46px;
}
::v-deep .van-nav-bar__title, .van-ellipsis {
  color: #fff;
  font-size: 18px;
  text-align: center;
}
::v-deep .van-icon, .van-icon-arrow-left, .van-nav-bar__arrow {
  color: #fff;
}
</style>
